<template>
	<div class="el-radio">
		<span class="el-radio_input" @click="_onchange">
			<span class="el-radio_inner" :class="{'is-checked':active}">
				<svg t="1659487878100" class="icon" viewBox="0 0 1028 1024" p-id="1249" width="12" height="12">
					<path
						d="M363.2525 867.984c-12.08 0-23.903-4.627-33.156-13.623L13.6955 537.96c-18.25-18.25-18.25-47.807 0-66.056 18.25-18.25 47.807-18.25 66.056 0L362.9975 755.149 948.5075 169.896c18.25-18.25 47.807-18.25 66.056 0 18.25 18.249 18.25 47.807 0 66.056l-618.41 618.41c-8.995 8.995-21.075 13.622-32.9 13.622z"
						p-id="1250" fill="#fff"></path>
				</svg>
			</span>
		</span>
		<span v-if="label" class="el-radio_label" :class="{activeText: active}">
			{{label}}
		</span>
		<span v-else class="el-radio_label" :class="{activeText: active}">
			<slot></slot>
		</span>
	</div>
</template>

<script>
	export default {
		name: 'el-radio',
		props: {
			value: {
				type: Boolean,
				require: false,
				default: false
			},
			label: {
				type: String,
				require: false,
				default: null
			}
		},
		model: {
			prop: 'value',
			event: 'input'
		},
		data() {
			return {
				active: this.value
			}
		},
		methods: {
			_onchange() {
				this.active = !this.active;
				this.$emit('change', this.active)
				this.$emit('input', this.active)
			}
		}
	}
</script>

<style scoped lang="scss">
	.el-radio {
		color: #606266;
		font-weight: 500;
		font-size: 14px;
		position: relative;
		cursor: pointer;
		display: inline-block;
		white-space: nowrap;
		user-select: none;
		display: flex;
		align-items: center;

		.el-radio_input {
			white-space: nowrap;
			cursor: pointer;
			outline: none;
			display: inline-block;
			line-height: 1;
			position: relative;
			vertical-align: middle;



			.el-radio_inner {
				display: inline-block;
				position: relative;
				border: 1px solid #dcdfe6;
				border-radius: 2px;
				width: 14px;
				height: 14px;
				text-align: center;
				line-height: 19px;
				background-color: #fff;
				z-index: 1;
				transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);
			}

			.is-checked {
				background-color: #409eff;
				border-color: #409eff;
			}

			.el-radio_original {
				opacity: 0;
				outline: none;
				position: absolute;
				margin: 0;
				width: 0;
				height: 0;
				z-index: -1;
			}
		}

		.el-radio_label {
			display: inline-block;
			padding-left: 6px;
			font-size: 14px;
			line-height: 14px;
			transition: all 0.25s;
		}
		
		.activeText {
			color: #409eff;
		}
	}
</style>
